<template>
	<view>
		<!-- 假设我需要状态栏到文字内容部分还有20px的距离 -->

		<view class="myNavigation bgc" :style="{height:height+100+'px'}">
			<view class="user-img-block" @click="toUserDetails" @longpress.stop='userMenuPop' >
				<image :src="headPic" 
				mode=""
				class="user-img"
				>
				</image>
			</view>
			<view class="user-status-block" @click="toAccountManagement">
				<view class="user-name">
					{{nickName}}
				</view>
				<view class="user-status">
					<label class="iconfont icondian"></label>
					{{status == 1 ? '在线' : '离线'}}
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			<view class="camera">
				<label class="iconfont iconxiangji"></label>
			</view>
			<view class="more">
				<label class="iconfont iconshizijiahao2"></label>
			</view>
		</view>
	<!-- 	<uni-nav-bar left-icon="back" 
		left-text="返回" right-text="菜单" 
		title="导航栏组件"
		backgroundColor="#007AFF"
		leftIcon=""
		>
		</uni-nav-bar> -->
	</view>
</template>

<script>
	
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	
	var _self
	export default {
		name: 'Navigation',
		data() {
			return {
				height:null,//获取的状态栏高度
				user: {}
			}
		},
		onLoad() {
			_self = this
		},
		props: {
			headPic: String,
			nickName: String,
			status: Number
		},
		beforeCreate(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		},
		methods: {
			userMenuPop() {
				console.log('长按了')
				this.toAccountManagement()
			},
			toAccountManagement() {
				console.log('跳转了')
				uni.navigateTo({
					url:'../../pages/login/account-management/account-management',
					animationType: 'zoom-fade-out',
					animationDuration: 300
				})
			},
			toUserDetails(){
				uni.navigateTo({
					url:'../../pages/user/userDetails/myDetails',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				})
			}
		},
		components: {
			uniNavBar
		}
	}
</script>

<style>
	/* .status_bar {
		background-color: #007AFF;
	} */
	.myNavigation {
		/* background-color: #10d4ff; */
		display: flex;
		flex-direction: row;
	/* 	justify-content: space-between; */
		position: fixed;
		/* bottom: 0; */
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		z-index: 1;
	}
	.user-img-block {
		flex: 2;
		position: absolute;
		left: 20rpx;
		bottom: 10rpx;
	}
	
	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-left: 12rpx;
	}
	
	.user-status-block {
		position: absolute;
		left: 120rpx;
		bottom: 10rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.user-name {
		font-size: 16px;
		color: #ffffff;
	}
	
	.user-status {
		display: flex;
		flex-direction: row;
		height: 40rpx;
		line-height: 50rpx;
		font-size: 12px;
		color: #ffffff;
	}
	
	.icondian {
		font-size: 10px;
		margin-right: 10rpx;
		color: #4CD964;
	}
	
	.icon113fangxiang_xiangyou {
		font-size: 10px;
		margin-left: 10rpx;
	}
	
	.camera {
		position: absolute;
		left: 580rpx;
		bottom: 25rpx;
	}
	
	.more {
		position: absolute;
		left: 680rpx;
		bottom: 25rpx;
	}
	
	.iconxiangji {
		font-size: 20px;
		color: #ffffff;
	}
	
	.iconshizijiahao2 {
		font-size: 20px;
		color: #ffffff;
		font-weight: 10;
	}
</style>
